<template>
  <div>
    <ul class="test-ee-radio">
      <li>
        <h1>测试单个radio</h1>
        <ee-button @click="test1.model = test1.model == undefined ? 2 : undefined">修改model:
          {{ this.test1.model }}</ee-button>
        <ee-button @click="test1.value = test1.value == undefined ? 4 : undefined">修改value:
          {{ this.test1.value }}</ee-button>
        <ee-button @click="test1.value = '桂林'">修改value为另一个值</ee-button>
        <ee-radio-group v-model="test1.model">
          <ee-radio ref="test1" :value="test1.value" v-model:checked="test1.checked">
            我是radio，当前model={{ test1.model }}，当前value={{ test1.value }}，当前checked={{ test1.checked }}，radio.checked={{
              $refs.test1?.checked }}
          </ee-radio>
        </ee-radio-group>
        <ee-radio value="1" special @check="test1.text += 1">其它组的radio: {{ test1.text }}</ee-radio>
      </li>
      <li>
        <h1>测试radio-group</h1>
        <ee-button @click="test2.value = '桂林'">修改value为桂林</ee-button>
        <ee-button @click="test2.value = undefined">修改value为undefined</ee-button>
        <ee-button @click="test2.values[3] = '上海'">修改最后一个为上海</ee-button>
        <ee-button @click="checkedCancel">将当前checked设置为false</ee-button>
        <h3>当前值：{{ test2.value }}</h3>
        <ee-radio-group ref="radioGroup" :options="test2.values" @onchange="test" v-model="test2.value">
        </ee-radio-group>

        <ee-radio-group style="margin-left:10px; font-size:24px" :options="test2.values" v-model="test2.value">
          <template #item="{ value, label }">
            <ee-radio type="button" :value="value">
              {{ label }}
            </ee-radio>
          </template>
        </ee-radio-group>

        <ee-radio-group name="radio" :options="test2.obj" v-model="test2.value">
          <template #item="{ value, label }">
            <ee-radio type :value="value">
              {{ label }}
            </ee-radio>
          </template>
        </ee-radio-group>
      </li>
      <li>
        <h1>测试checkbox</h1>
        <div>当前值：{{ test3.value }}</div>
        <div class="fa">
          <ee-button @click="test3.value.push('上海')">增加一个上海值</ee-button>
          <ee-button @click="test3.value.push('日本')">增加一个日本值</ee-button>
          <ee-button
                     @click="test3.values.includes('日本') ? test3.values.remove('日本') : test3.values.push('日本')">增加/删除一个日本选项</ee-button>
          <ee-checkbox-all :group="$refs.checkboxRef">全选</ee-checkbox-all>
          <ee-button @click="$refs.checkboxRef.reverseAll()">反选</ee-button>
          <ee-button @click="test3.test = !test3.test">切换class:{{ test3.test }}</ee-button>
        </div>
        <ee-checkbox-group @change="test" ref="checkboxRef" style="font-size:44px" v-model="test3.value">
          <ee-checkbox type="tick" v-for="item in test3.values" :key="item" :value="item">
            {{ item }}
          </ee-checkbox>
        </ee-checkbox-group>
        <ee-checkbox-group style="font-size:24px" v-model="test3.value">
          <ee-checkbox type="button" v-for="item in test3.values" :key="item" :value="item">
            {{ item }}
          </ee-checkbox>
        </ee-checkbox-group>
        
        <ee-checkbox-group name="checkbox" min="1" max="3" style="font-size:24px" v-model="test3.value">
          限制选项
          <ee-checkbox :class="{'test': test3.test }" type="tick" v-for="item in test3.values" :key="item" :value="item">
            {{ item }}
          </ee-checkbox>
        </ee-checkbox-group>

        <ee-checkbox value="checkbox" ref="checkboxOnly" @change="test">checkbox单独使用{{ $refs.checkboxOnly?.checked }}</ee-checkbox>
      </li>
    </ul>
  </div>
</template>

<script type="text/javascript">

export default {
  name: "test-ee-radio",
  data() {
    return {
      test1: {
        model: undefined,
        value: 0,
        checked: undefined,
        text: '',
      },
      test2: {
        values: ["北京", "上海", "广州", "桂林"],
        obj: { 'a': "北京", 'b': "上海", 'c': "广州", 'd': "桂林" },
        value: undefined,
      },
      test3: {
        values: ["北京", "上海", "广州", "桂林"],
        value: undefined,
        test: true,
      }
    }
  },
  methods: {
    test(i) {
      console.log("test: ", i)
    },
    checkedCancel() {
      for (const item of this.$refs.radioGroup.children) {
        if (item.checked) {
          console.log("checked set false", item)
          item.checked = false;
          break;
        }
      }
    },
    test3Type() {

    }
  },
  mounted() {
    // this.test2.value = "桂林"
  },
}
</script>

<style lang="scss" scoped>
ul.test-ee-radio {
  padding: 1em;

  & > li {
    margin: 1em 0;
  }

  .test {
    font-size: 48px;
  }
}
</style>